<template>
    <div class="table">
        <!-- 页面表格begin -->
        <div class="crumbs">
            <!-- 页面标题begin -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i> 角色资源管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 页面标题end-->
        <div class="container">
            <!-- 页面内容区begin -->
            <div id="app">
                <div style=" width:50%;float:left;">
                    <div>
                        角色名称：
                        <el-input v-model="s_rolename" label="角色编码" placeholder="角色编码" style="width:200px; heght:30px;" size="mini"></el-input>
                        角色编码：
                        <el-input v-model="s_rolecode" label="角色编码" placeholder="角色编码" style="width:200px; heght:30px;" size="mini"></el-input>
                        <el-button type="success" icon="el-icon-search" @click="getResult(1)" size="mini">搜索</el-button>

                    </div>

                    <!--表格数据及操作-->
                    <el-table :data="tableData" class="mgt20" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark" @row-click="clickRow">
                        <!--勾选框-->
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <!--索引-->
                        <el-table-column type="index" :index="indexMethod">
                        </el-table-column>
                        <el-table-column prop="roleName" label="角色名称" width="180" sortable>
                        </el-table-column>
                        <el-table-column prop="roleCode" label="角色编码" width="180">
                        </el-table-column>
                        <el-table-column prop="roleType" label="角色类型">
                        </el-table-column>
                        <el-table-column prop="id" label="id">
                        </el-table-column>
                    </el-table>
                    <br>
                    <br>
                    <!--分页条total, sizes, prev, pager, next, jumper-->
                    <el-pagination @size-change="handleSizeChange" @current-change="getResult" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="roletotal">
                    </el-pagination>
                </div>
                <div style=" width:45%;float:right;">
                    <el-button type="success" icon="el-icon-search" @click="saveRoleacl" size="mini">保存</el-button>
                    <el-tree :data="treeData" class="mgt20" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :check-strictly=true :props="defaultProps">
                    </el-tree>
                </div>
            </div>
        </div>
        <!-- 页面内容区end-->
    </div>
    <!-- 页面表格end -->
</template>
<script>
export default {
  data () {
    return {
      tableData: [],
      roleTypeData: [],
      treeData: [],
      input: '',
      curentroleid: '',
      curentrow: null,
      // 列表Loading加载
      listLoading: false,
      // 添加按钮Loading加载
      addLoading: false,
      roletotal: 0,
      currentPage: 1,
      pageSize: 10,
      // 检索字段
      s_rolename: '',
      s_rolecode: '',
      //     s_roleType:"",
      defaultProps: {
        children: 'children',
        label: 'name'
      }

    }
  },

  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    indexMethod (index) {
      return index
    },
    // 获取角色列表
    getResult: function (val) {
      var _this = this
      this.listLoading = true
      let param = Object.assign({}, { currentPage: val, pageSize: 10, roleName: this.s_rolename, roleCode: this.s_rolecode })
      this.$ajax({
        method: 'post',
        url: '/api/sysrole-api/querySysRoleList',
        data: param
      }).then(
        function (resultData) {
          _this.tableData = resultData.data.data
          _this.roletotal = resultData.data.count
          _this.listLoading = false
        },
        function (resultData) {
          // _this.tableData.message = "Local Reeuest Error!";
          // console.log(resultData);
        }
      )
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getResult(1)
    },
    getresourceData () {
      var _this = this
      // this.listLoading = true;

      let param = Object.assign({}, {})
      this.$ajax({
        method: 'post',
        url: '/api/sysResource_api/getSysResourceList',
        data: param
      }).then(
        function (resultData) {
          _this.treeData = resultData.data.data
          console.log(JSON.stringify(_this.treeData))
        },
        function (resultData) {
          // _this.tableData.message = "Local Reeuest Error!";
          // console.log(resultData);
        }
      )
    },
    clickRow: function (row) {
      var _this = this
      _this.roleuserSelect = []
      _this.curentroleid = row.id
      _this.curentrow = row
      let param = Object.assign({}, { roleId: _this.curentroleid })
      this.$ajax({
        method: 'post',
        url: '/api/sysAcl-api/getSysAclList',
        data: param
      }).then(
        function (resultData) {
          let list = []

          resultData.data.data.forEach(item => {
            list.push(item.resoureId)
          })
          // alert(list);
          console.log(JSON.stringify(list))
          _this.$refs.tree.setCheckedKeys(list)
        },
        function (resultData) {
          // _this.tableData.message = "Local Reeuest Error!";
          // console.log(resultData);
        }
      )
    },

    saveRoleacl: function () {
      var _this = this
      if (this.curentroleid == '') {
        alert('请选择要添加的角色，单击选择行。')
      }
      var sellist = this.$refs.tree.getCheckedKeys()
      //    var treeNodes = this.$refs.tree.getCheckedNodes(true);
      //    for(var i = 0; i < treeNodes.length; i++) {
      //    if(sellist.indexOf(treeNodes[i].parentId)<0){
      //     sellist.push(treeNodes[i].parentId);
      //    }
      //    }
      var roleid = this.curentroleid
      if (sellist.length > 0) {
        this.listLoading = true
        let param = Object.assign({}, { id: 0, roleId: roleid, resourceids: sellist })
        this.$ajax({
          method: 'post',
          url: '/api/sysAcl-api/insertSysAcl',
          data: param
        }).then(
          function (resultData) {
            alert(resultData.data.message)
            _this.clickRow(_this.curentrow)
          }
        )
      }
    }

  },
  mounted () {
    // 获取列表
    this.getResult()
    this.getresourceData()
  }
}
</script>
<style>
/* #app {
        font-family: Helvetica, sans-serif;
        text-align: center;
    } */

#roleuser {
    font-family: Helvetica, sans-serif;
    text-align: center;
}

el-input {
    width: 200px;
    height: 50px;
}
</style>
